<template>
	<view class="position-content bg-white">
		<view v-if="formartPosition!=null&&formartPosition.mylen>0">
			<view v-for="(item,index) in formartPosition.holding" :key="index">
				<view class="mycard" v-if="item.f_long_qty>0">
					<view>
						<view class="mycard-head uni-flex uni-row">
							<view class="uni-flex contract">
								{{item.instrument_id}}
								<view style="color: #00B48E;">多头{{item.long_leverage}}X</view>
							</view>
							<view class="uni-flex share">分享</view>
						</view>
						<view class="mycard-body uni-flex uni-row">
							<view class="open-info uni-flex uni-row" style="padding: 5upx 0upx;">
								<view class="uni-flex uni-column" style="flex: 1;padding: 10upx 0upx;">
									<view class="uni-flex uni-column" style="flex: 1;">
										<view class="mtitle">开仓均价</view>
										<view class="mcontent">${{item.f_long_avg_cost}}</view>
									</view>
									<view class="uni-flex uni-column" style="flex: 1;">
										<view class="mtitle">收益</view>
										<view class="mcontent">{{item.f_long_realised}}</view>
									</view>
								</view>
								<view class="uni-flex uni-column" style="flex: 1; padding: 10upx 0upx;">
									<view class="uni-flex uni-column" style="flex: 1;">
										<view class="mtitle">预估强平价</view>
										<view class="mcontent">${{item.f_long_liqui_price}}</view>
									</view>
									<view class="uni-flex uni-column" style="flex: 1;">
										<view class="mtitle">收益率</view>
										<view class="mcontent">{{item.f_long_pnl_ratio}}%</view>
									</view>
								</view>
							</view>
							<view class="detail uni-flex uni-column" style="padding: 10upx 0upx;">
								<view class="uni-flex uni-row" style="flex: 1;">
									<view class="detail-item">未实现盈亏</view>
									<view class="detail-item">{{item.f_long_unrealised_pnl}}</view>
									<view class="detail-item">保证金</view>
									<view class="detail-item">{{item.f_long_margin}}</view>
								</view>
								<view class="uni-flex uni-row" style="flex: 1;">
									<view class="detail-item">持仓量</view>
									<view class="detail-item">{{item.f_long_qty}}张</view>
									<view class="detail-item">保证金率</view>
									<view class="detail-item">{{item.f_long_margin_ratio}}%</view>
								</view>
								<view class="uni-flex uni-row" style="flex: 1;">
									<view class="detail-item">可平量</view>
									<view class="detail-item">{{item.f_long_avail_qty}}张</view>
									<view class="detail-item">维持保证金率</view>
									<view class="detail-item">{{item.f_long_maint_margin_ratio}}%</view>
								</view>
							</view>
						</view>
						<view class="mycard-foot uni-flex uni-row">
							<view class="mylink" @click="fastClose(item.f_long_avail_qty,'SELL_LONG')">一键平仓</view>
							<!-- <view class="mylink" @click="unSpport">一键反向</view>
							<view class="mylink" @click="unSpport">限价平仓</view>
							<view class="mylink" @click="unSpport">一键对锁</view> -->
						</view>
						<!-- <view class="mycard-foot uni-flex uni-row" style="margin-top: 10upx;">
							<view class="mylink" @click="createTentOrder(0.01,'SELL_LONG')">营帐回撤1%</view>
							<view class="mylink" @click="createTentOrder(0.02,'SELL_LONG')">营帐回撤2%</view>
							<view class="mylink" @click="createTentOrder(0.03,'SELL_LONG')">营帐回撤3%</view>
							<view class="mylink" @click="createTentOrder(0.04,'SELL_LONG')">营帐回撤4%</view>
						</view> -->
					</view>
				</view>
				<view class="mycard" v-if="item.f_short_qty>0">
					<view>
						<view class="mycard-head uni-flex uni-row">
							<view class="uni-flex contract">
								{{item.instrument_id}}
								<view style="color: #D14B64;">空头{{item.short_leverage}}X</view>
							</view>
							<view class="uni-flex share">分享</view>
						</view>
						<view class="mycard-body uni-flex uni-row">
							<view class="open-info uni-flex uni-row" style="padding: 5upx 0upx;">
								<view class="uni-flex uni-column" style="flex: 1;padding: 10upx 0upx;">
									<view class="uni-flex uni-column" style="flex: 1;">
										<view class="mtitle">开仓均价</view>
										<view class="mcontent">${{item.f_short_avg_cost}}</view>
									</view>
									<view class="uni-flex uni-column" style="flex: 1;">
										<view class="mtitle">收益</view>
										<view class="mcontent">{{item.f_short_realised}}</view>
									</view>
								</view>
								<view class="uni-flex uni-column" style="flex: 1; padding: 10upx 0upx;">
									<view class="uni-flex uni-column" style="flex: 1;">
										<view class="mtitle">预估强平价</view>
										<view class="mcontent">${{item.f_short_liqui_price}}</view>
									</view>
									<view class="uni-flex uni-column" style="flex: 1;">
										<view class="mtitle">收益率</view>
										<view class="mcontent">{{item.f_short_pnl_ratio}}%</view>
									</view>
								</view>
							</view>
							<view class="detail uni-flex uni-column" style="padding: 10upx 0upx;">
								<view class="uni-flex uni-row" style="flex: 1;">
									<view class="detail-item">未实现盈亏</view>
									<view class="detail-item">{{item.f_short_unrealised_pnl}}</view>
									<view class="detail-item">保证金</view>
									<view class="detail-item">{{item.f_short_margin}}</view>
								</view>
								<view class="uni-flex uni-row" style="flex: 1;">
									<view class="detail-item">持仓量</view>
									<view class="detail-item">{{item.f_short_qty}}张</view>
									<view class="detail-item">保证金率</view>
									<view class="detail-item">{{item.f_short_margin_ratio}}%</view>
								</view>
								<view class="uni-flex uni-row" style="flex: 1;">
									<view class="detail-item">可平量</view>
									<view class="detail-item">{{item.f_short_avail_qty}}张</view>
									<view class="detail-item">维持保证金率</view>
									<view class="detail-item">{{item.f_short_maint_margin_ratio}}%</view>
								</view>
							</view>
						</view>
						<view class="mycard-foot uni-flex uni-row">
							<view class="mylink" @click="fastClose(item.f_short_avail_qty,'SELL_SHORT')">一键平仓</view>
							<!-- <view class="mylink" @click="unSpport">一键锁仓</view>
							<view class="mylink" @click="unSpport">限价平仓</view>
							<view class="mylink" @click="unSpport">一键保仓</view> -->
						</view>
						<!-- <view class="mycard-foot uni-flex uni-row" style="margin-top: 10upx;">
							<view class="mylink" @click="createTentOrder(0.01,'SELL_SHORT')">营帐回撤1%</view>
							<view class="mylink" @click="createTentOrder(0.02,'SELL_SHORT')">营帐回撤2%</view>
							<view class="mylink" @click="createTentOrder(0.03,'SELL_SHORT')">营帐回撤3%</view>
							<view class="mylink" @click="createTentOrder(0.04,'SELL_SHORT')">营帐回撤4%</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view v-else class="padding-xl text-center solid-top">
			暂无持仓
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				position: null
			}
		},
		mounted() {
			uni.$on("positionUsedFresh", this.fresh)
			this.fresh()
		},
		computed: {
			formartPosition: function() {
				let tempPosition = this.position
				if (tempPosition != null) {
					tempPosition.mylen=0
					for (let item of tempPosition.holding) {
						if (item.long_qty > 0) {
							item.f_long_maint_margin_ratio = Number(item.long_maint_margin_ratio * 100).toFixed(2)
							item.f_long_margin_ratio = Number(item.long_margin_ratio * 100).toFixed(2)
							item.f_long_pnl_ratio = Number(item.long_pnl_ratio * 100).toFixed(2)
							item.f_long_avail_qty = Number(item.long_avail_qty).toFixed(0)
							item.f_long_qty = Number(item.long_qty).toFixed(0)
							item.f_long_margin = Number(item.long_margin).toFixed(4)
							item.f_long_unrealised_pnl = Number(item.long_unrealised_pnl).toFixed(4)
							item.f_long_liqui_price = Number(item.long_liqui_price).toFixed(4)
							item.f_long_avg_cost = Number(item.long_avg_cost).toFixed(4)
							item.f_long_realised = Number(Number(item.long_settled_pnl) + Number(item.long_unrealised_pnl)).toFixed(4)
							tempPosition.mylen+=1
						}

						if (item.short_qty > 0) {
							item.f_short_maint_margin_ratio = Number(item.short_maint_margin_ratio * 100).toFixed(2)
							item.f_short_margin_ratio = Number(item.short_margin_ratio * 100).toFixed(2)
							item.f_short_pnl_ratio = Number(item.short_pnl_ratio * 100).toFixed(2)
							item.f_short_avail_qty = Number(item.short_avail_qty).toFixed(0)
							item.f_short_qty = Number(item.short_qty).toFixed(0)
							item.f_short_margin = Number(item.short_margin).toFixed(4)
							item.f_short_unrealised_pnl = Number(item.short_unrealised_pnl).toFixed(4)
							item.f_short_liqui_price = Number(item.short_liqui_price).toFixed(4)
							item.f_short_avg_cost = Number(item.short_avg_cost).toFixed(4)
							item.f_short_realised = Number(Number(item.short_settled_pnl) + Number(item.short_unrealised_pnl)).toFixed(4)
							tempPosition.mylen+=1
						}

					}
				}
				return tempPosition
			}
		},
		methods: {
			unSpport() {
				uni.showToast({
					title: "加紧开发中"
				})
			},
			fresh: function() {
				this.getPosition()
			},
			getPosition() {
				uni.request({
					url: this.api + '/apis/okex/authed?simpleUrl=/api/futures/v3/' + this.getDefaultContract().instrument_id +
						'/position',
					method: 'GET',
					header: {
						"Authorization": "Bearer " + this.getToken()
					},
					data: {},
					success: res => {
						console.log('getPosition Resps:')
						console.log(res.data)
						if (res.data.data.result) {
							this.position = res.data.data
						}
					}
				});
			},
			createTentOrder(range, direction) {
				uni.showLoading({
					mask: true,
					title: "加载中..."
				})
				console.log("createTentOrder" + range + "direction " + direction)
				uni.request({
					url: this.api + '/futures/tent?isCreateOrder=true',
					method: 'POST',
					header: {
						"Authorization": "Bearer " + this.getToken()
					},
					data: {
						"direction": direction,
						"instrumentId": this.getDefaultContract().instrument_id,
						"leverage": 10,
						"tentRange": range
					},
					success: res => {
						this.getPosition()
					},
					complete() {
						uni.hideLoading()
					}
				});
			},
			fastClose(mount, direction) {
				uni.showLoading({
					mask: true,
					title: "加载中..."
				})
				console.log("fastClose mount" + mount + "direction " + direction)
				uni.request({
					url: this.api + '/futures/orders/quickclose?instrumentId=' + this.getDefaultContract().instrument_id + '&mount=' +
						mount + '&direction=' + direction,
					method: 'POST',
					header: {
						"Authorization": "Bearer " + this.getToken()
					},
					success: res => {
						this.getPosition()
					},
					complete() {
						uni.hideLoading()
					}
				});
			}

		}
	}
</script>

<style scoped>
	.position-content {
		height: 100vh;
		padding-top: 1upx;
	}

	.mycard {
		display: flex;
		flex-direction: column;
		height: 550upx;
		background-color: #FFFFFF;
		margin-top: 20upx;
		padding: 0 20upx;
	}

	.mycard .mycard-head {
		flex: 1;
	}

	.mycard .mycard-body {
		flex: 4;
		border-top: #F5F5F5 1px solid;
		display: flex;
		flex-direction: column;
	}

	.mycard .mycard-foot {
		flex: 1;
		border-top: #F5F5F5 1px solid;
	}

	.open-info {
		flex: 3;
	}

	.detail {
		border-top: #F5F5F5 1px solid;
		flex: 2;
	}

	.mylink {
		flex: 1;
		color: #0069D9;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.contract {
		flex: 3;
		font-size: 33upx;
		display: flex;
		align-items: center;
	}

	.contract view {
		font-size: 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 15upx;
		color: #00B26A;
	}

	.share {
		display: flex;
		text-align: right;
		align-items: center;
	}

	.mtitle {
		flex: 1;
		color: #8B8989;
		font-size: 20upx;
	}

	.mcontent {
		flex: 2;
		font-size: 33upx;
	}

	.detail-item {
		flex: 1;
		color: #8B8989;
		font-size: 20upx;
	}
</style>
